<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>base map(底图切换)</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css"> -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/BasemapToggle",
            "esri/widgets/BasemapGallery"
        ],function(Map,MapView,BasemapToggle,BasemapGallery){
            var map = new Map({
                basemap:"topo-vector"
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center:[-118.80543,34.02700],
                zoom:13
            });
            //两种切换方式
            //从arcgis online 组中选择底图
            var basemapToggle = new BasemapToggle({
                view:view,
                secondMap:"satellite"
                //nextBasemap和secondMap效果一样
            });
            view.ui.add(basemapToggle,"bottom-right");
            var basemapToggle1 = new BasemapToggle({
                view:view,
                nextBasemap:"streets-vector"
                //nextBasemap和secondMap效果一样
            });
            view.ui.add(basemapToggle1,"bottom-right");
            // 加载栅格图块底图 ( 存留疑问 => 怎么使用 )
            var BasemapGallery = new BasemapGallery({
                view:view,
                source: {
                    portal: {
                        url: "http://www.arcgis.com",
                        useVectorBasemaps: true,  //加载矢量平铺底图组
                    }
                }
            })
            view.ui.add(BasemapGallery,"top-right");
        });
        
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>